<template>
  <div class="edit box">
    <div>
      <p>
        &#12288;<i class="icon-bitian iconfont"></i>传输配置名称
        <el-input v-model="detailList.name" placeholder="请输入传输配置名称" size="normal" @input="changeStatus" maxlength="30"></el-input>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>文件总大小(MB)
        <span class="fixWidth">
          <el-input-number v-model="detailList.minFileSize" controls-position="right" :min="0" :max="5120" size="normal" @change="handleChange"></el-input-number>
          <span>&nbsp;<s>&#12288;&#12288;</s>&nbsp;</span>
          <el-input-number v-model="detailList.maxFileSize" controls-position="right" :min="detailList.minFileSize===0?1:detailList.minFileSize" :max="5120" size="normal" @change="changeStatus"></el-input-number>
          <span class="limit"><i class="el-icon-warning-outline"></i>最大不超过5120</span>
        </span>
      </p>
      <p>
        &#12288;&#12288;&#12288;<i class="icon-bitian iconfont"></i>对象权限
        <span class="fixWidth">
          <el-radio label="0" size="normal" v-model="detailList.objectPermission">私有</el-radio>
          <el-radio label="1" size="normal" v-model="detailList.objectPermission">公共读</el-radio>
        </span>
      </p>
      <p>
        &#12288;<i class="icon-bitian iconfont"></i>最大上传个数
        <span class="fixWidth">
          <el-input-number v-model="detailList.maxUploadNumber" controls-position="right" :min="1" :max="9" size="normal" @change="changeStatus"></el-input-number>
        </span>
      </p>
      <p>
        &#12288;<i class="icon-bitian iconfont"></i>文件类型限制
        <span class="fixWidth">
          <el-radio label="0" size="normal" v-model="detailList.fileType">图片</el-radio>
          <el-radio label="1" size="normal" v-model="detailList.fileType">视频</el-radio>
          <el-radio label="2" size="normal" v-model="detailList.fileType">图片和视频</el-radio>
        </span>
      </p>
      <p>
        &#12288;&#12288;&#12288;&#12288;&#12288;&#12288;备注
        <el-input
            type="textarea"
            size="normal"
            maxlength="100"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="detailList.remarks"
            resize="none"
            @input="changeStatus">
        </el-input>
      </p>
      <p>
        <el-button type="primary" round @click="transUpdate" size="normal">确认</el-button>
        <el-button round @click="()=>{$router.push('/configManage/transmissionConfig')}" size="normal">取消</el-button>
      </p>
    </div>

  </div>
</template>

<script>
export default {
  name: "transmissionEdit",
  components:{},
  data(){
    return{
      // 是否改变
      isChange:false,
      // 是否提交
      isSubmit:false,
      detailList:{},
    }
  },
	created() {
		this.id=this.$route.query.id;
		this.getTrans();
    this.isSubmit = false;
    this.isChange = false;
  },
  // 路由离开守卫
  beforeRouteLeave(to , from , next){
    // 如果已提交或未修改 则可以离开
    if(this.isSubmit || !this.isChange){
      next();
    }else{
      // 如果已修改或未提交 则弹窗提示
      this.changeTips();
      next(false);
    }
  },
	methods:{
		// 根据id获取详情
		async getTrans(){
			await this.$Http.transDetail({
				id:this.id
			}).then(res =>{
				this.detailList = res.data;
			})
		},
		// 提交
		async transUpdate(){
			if(this.verify()){
				this.$Http.transUpdate(this.detailList).then(res =>{
					if(res.code === 'SUCCESS'){
            this.isSubmit = true;
            this.$message({
              message:'修改成功',
              type:'success'
            });
						this.$router.push('/configManage/transmissionConfig');
					}else{
						this.$message({
							type: "info",
							message: res.message,
						});
					}
				})
			}
		},
    // 修改提醒
    changeTips() {
      this.$confirm('检测到未提交的内容，是否在离开页面前提交修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '提交',
        cancelButtonText: '放弃修改'
      })
          .then(() => {
            // 进行提交
            this.transUpdate();
          })
          .catch(action => {
            // 如何是选择放弃保存并离开页面
            if(action === 'cancel'){
              this.isChange = false;
              this.$router.push('/configManage/transmissionConfig');
            }
            this.$message({
              type: 'info',
              message: action === 'cancel'
                  ? '放弃提交并离开页面'
                  : '停留在当前页面'
            })
          });
    },
    changeStatus(){
      this.isChange =true;
    },
		// 校验
		verify(){
			if(this.detailList.name ===""){
				this.$message.error("请填写传输配置名称");
				return false;
			}else if(this.detailList.fileType === ''){
				this.$message.error("请选择文件类型");
				return false;
			}else if(this.detailList.objectPermission === ''){
				this.$message.error("请选择对象操作权限");
				return false;
			}else if(this.detailList.remarks.length >255){
				this.$message.error("备注信息太长啦！");
				return false;
			}
			else{
				return true;
			}
		},
    //判断文件大小最大大于最小
    handleChange(){
      this.changeStatus()
      if(this.detailList.maxFileSize < this.detailList.minFileSize){
        this.$message.warning("文件最大值小于最小值，不符合要求，请重新输入")
      }
    }
	}
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

</style>
